extends site

block append head
  link(rel='stylesheet', href='stylesheets/index.css'))
  script(src='javascripts/jquery.slides.js'));
  script
    $(function() {
      var $logo = $('.logo');
      var $cover = $("#cover");

      $('#slides').slidesjs({
        width: $logo.outerWidth(),
        height: $logo.outerHeight(),
        navigation: {
          active: false,
        },
        pagination: {
          effect: 'fade'
        }
      });

      $('<div></div>').css({
        position: 'absolute',
        left: $cover.css('left'),
        top: $cover.css('top'),
        backgroundColor: 'white',
        opacity: '0.6',
        width: '50%',
        height: $cover.outerHeight() + 'px',
        zIndex: 9,
        borderRadius: '0 10px 10px 0',
        boxShadow: '0 0 10px #ccc'
      }).appendTo($('.overlay').parent());

      var $box = $('<div class="popup"></div>').css({
        position: 'absolute',
        left: 100, top: 100,
        zIndex: 20,
        width: '250px', backgroundColor: 'white',
        borderRadius: '0.3em',
        boxShadow: '0 0 0.5em #ccc',
        display: 'none'
      }).appendTo(document.body).mouseover(function (event) {
        clearTimeout($box.data('popover-timer'));
      }).mouseleave(function (event) {
        $box.fadeOut();
      });

      $('.navbar a.catalog').mouseover(function (event) {
        var $this = $(this);
        clearTimeout($box.data('popover-timer'));

        $.get($this.attr('href')).success(function (data) {
          $box.html(data);
        });

        var offset = $this.offset();
        $box.clearQueue().animate({
          top: offset.top + $this.outerHeight()+5,
          left: offset.left-$box.width()/2+$this.outerWidth()/2
        }).fadeIn();
      }).mouseleave(function (event) {
        var $this = $(this);
        $box.data('popover-timer', setTimeout(function () {
          $box.hide();
        }, 1000));
      });
        
    });

block main-stage
  .logo
    #cover.overlay
      h1 「发现」
      form(action='articles/', method='GET')
        .input-append
          input(type='text',name='tag',placeholder='发现有趣的东西~').span3
          button(type='submit').btn.btn-primary 搜索
          a(type='button',href='feedback').btn 反馈

    #slides
      each img in headPics
        .slide
          img(src=img.src,title='#{img.title}')
          .description
            .description-container
              .title #{img.title}
              p #{img.description}

